<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据集管理</title>
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/common.css">
  <link rel="stylesheet" href="/css/manager.css">
  <style>
    .item{
      position: relative;
      height: 200px;
      width: 100%;
      /*border: 1px solid #8c939d;*/
    }
    .item img{
      position: absolute;
      left: 20px;
      top: 20px;
      height: 150px;
      width: 150px;
    }
    .text{
      position: absolute;
      top: 20px;
      left: 200px;
    }
    ._button{
      position: absolute;
      right: 100px;
      top: 50px;
    }
    .demo-drawer__footer{
      padding-left: 10%;
    }
  </style>
</head>
<body>
  <div id="app">
  数据集管理（分析页面）
    <el-button type="success" @click="dialog = true"
      style="position: absolute;top: 15px;right: 50px">添加分析数据</el-button>
    <div style="margin: 30px"></div>
    <div class="item" v-for="item in fenxi">
      <img :src="item.icon">
      <div class="text">
        <h2>{{item.title}}</h2>
        <p>{{item.description}}</p>
        <p>{{item.file}}</p>
        <p>{{item.fenxiClass}}</p>
      </div>
<!--      按钮-->
      <div class="_button">
        <el-button type="primary" @click="edit(item)">编辑</el-button>
        <el-button type="danger" @click="_delete(item)">删除</el-button>
      </div>
    </div>

    <el-drawer
            title="编辑数据"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%"
    >
      <div class="demo-drawer__content">
        <el-form :model="editFenxi">
          <el-form-item label="分析名称" :label-width="formLabelWidth">
            <el-input v-model="editFenxi.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="editFenxi.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文件信息" :label-width="formLabelWidth">
            <el-input v-model="editFenxi.file" autocomplete="off" placeholder="例如 1文件-1MB"></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select v-model="editFenxi.fenxiClass" multiple placeholder="请选择">
              <el-option
                      v-for="item in ['推荐','医疗','经济','气象','机器学习']"
                      :label="item"
                      :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-upload
                    action="/file/upload"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el : "#app",
    mounted(){
    this.pageInit();
    },
    methods : {
      pageInit(){
        axios({
          method: 'get',
          url: '/backgroundData/fenxi',
        }).then((resp)=>{
          this.fenxi = resp.data.data;
          for (let i = 0; i < this.fenxi.length; i++) {
            var str = this.fenxi[i].fenxiClass;
            this.fenxi[i].fenxiClass = str.split(',');
            // console.log(str.split(','))
          }
        })
      },
      edit(row){
        //弹出抽屉 数据为row
        this.editFenxi = row
        this.dialog = true
      },
      _delete(row){
        //确认删除
        axios({
          method : 'delete',
          url : '/backgroundData/fenxi/'+row.id,
        }).then((resp)=>{
          this.$message({
            type: 'success',
            message: resp.data.data
          })
        })
      },
      //-抽屉-----------------------------------------
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定要提交表单吗？').then(_ => {
          this.loading = true;
          // console.log(this.editFenxi.fenxiClass.toString())
          this.editFenxi.fenxiClass = this.editFenxi.fenxiClass.toString();
          //发送请求
          axios({
            method : 'post',
            url : '/backgroundData/fenix',
            data : this.editFenxi,
          }).then((resp)=> {
            if (resp.data.code === 1) {
              this.$message({
                type: 'success',
                message: resp.data.data,
              })
            } else {
              this.$message({
                type: 'warning',
                message: resp.data.msg,
              })
            }
          })
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 1000);
          this.editFenxi = {}
        }).catch(_ => {
          this.cancelForm()
        });
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
      //图片上传的许多方法
      handleRemove(file, fileList) {
        // console.log(file);

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadSuccess(response,file,fileList){
        console.log(file.response.data)
        this.editFenxi.icon = '/file/download/'+file.response.data
      },
    },
    data(){
      return {
        fenxi: [
          {
            id : '',
            icon : '',
            title : '',
            description : '',
            file : '',
            fenxiClass : null,
          }
        ],
        //抽屉-----------------------------
        editFenxi: {
          id : '',
          icon : '',
          title : '',
          description : '',
          file : '',
          fenxiClass : null,
        },
        dialog: false,
        loading: false,
        formLabelWidth: '80px',
        timer: null,
        //图片上传----------------------------------
        dialogImageUrl: '',
        dialogVisible: false,
      }
    }
  })
</script>
</html>